<template>
	<view class="content">
		<showNewData ref='chrildx$6' ></showNewData>
		<view class="top_bar">
			<view @click="backLogin" class="top_bar_left">
				<image src="../../static/fh.png" mode=""></image>
			</view>
			<view class="top_bar_center" @click="addfriendAnimat"  >
				<!-- <text>{{ userinfo.username }}</text>s -->
			</view>
			<view @click="sendRequest" class="top_bar_right">
				<image src="../../static/three.png" mode=""></image>
			</view>
		</view>
		<view :animation='animationData4' class="bg" >
			<view  class="main">
				<view class="userimg">
					<image :animation='animationData2' mode="widthFix" :src='userinfo.userimg' ></image>
					<view class="gender">
						<image v-if="userinfo.gender==1" :animation='animationData3' src="../../static/man.png" mode=""></image>
						<image v-if='userinfo.gender==2' :animation='animationData3' src="../../static/woman.png" mode=""></image>
					</view>
				</view>
				<view class="username">
					{{ userinfo.username }}
				</view>
				<view  class='sub_name'>邮箱:{{ userinfo.email }}</view>
				<view class="userdata">
					{{ userinfo.text }}
				</view>
				<view class="but">
					<view @click="addfriendAnimat" class="buts">
						添加好友
						<!-- <view  style="z-index: 1000;" class="butss"></view> -->
					</view>
				</view>
				<view class="add_misg" :style="{height:addHeighht+'px',top:addHeighht+186+'px'}" :animation='animationData' >
					<view class="name">{{ userinfo.username }}</view>
					<textarea v-model="new_data" class="add_main" maxlength="120" />
					<view class="add_but">
						<view class="close" @click="addfriendAnimat">取消</view>
						<view class="send">发送</view>
					</view>
				</view>
			</view>
			<view  class="bg_img" >
				<image :src='userinfo.userimg' mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import showNewData from '../../components/showNewData.vue'
	import request from '../../utails/request.js'
	
	export default {
		data() {
			return {
				usermain:{},
				userinfo:{},
				new_data:'',
				addHeighht:'',
				chrildx:'',
				animationData:{},
				animationData2:{},
				animationData3:{},
				animationData4:{},
				isadd:false
			}
		},
		components:{
			showNewData
		},
		
		onLoad(e) {
			this.usermain = uni.getStorageSync('userinfo')
			this.getUserInfo(e.id)
			this.getSocketData(e.id)
		},
		onReady() {
			this.getElementStyle()
			// this.addfriendAnimat()
		},
		onShow() {
			this.usermain = uni.getStorageSync('userinfo')
			this.getUserInfo(e.id)
			this.getSocketData(e.id)
		},
		onHide() {
			this.chrildx=''
		},
		methods: {
			// 接socket提醒
			getSocketData(id){
				this.socket.emit('login',this.usermain.id)
				this.socket.on('shows',(data)=>{
					this.chrildx = `chrildx$6`
					let datas = {
						userimg:data.userimg,
						username:data.username,
						message:data.message
					}
					
					let ch = this.$refs[this.chrildx]
					console.log(this.$refs)
					setTimeout(()=>{
						ch.handleShow(datas)
					},300)
				})
			},
			
			
			// 获取数据
			async getUserInfo(id){
				const resp = await request.request({url:'/usermain/',data:{userid:id}})
				this.userinfo = resp
				// 处理
				this.new_data = this.usermain.username + '请求添加为好友'
			},
			
			// 发送申请
			 async sendRequest(){
				 let data = {
					 userid:this.usermain.id,
					 friendid:this.userinfo.id,
					 new_data:this.new_data
				 }
				 
				let res = await request.request2({url:'/requestfriend/',data, method:'POST' })
				if(res.code=='200'){
					uni.showToast({
						title:'请求已发送',
					})
					this.sedShow() // 通知
					setTimeout(()=>{
						uni.redirectTo({
							url:'../index/index'
						})
					},1500)
				}else if(res.code=='401'){
					uni.showToast({
						title:'您已申请过 请不要重复申请',
						icon:'none'
					})
				}else{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				}
			 },
			// 好友申请通知
			sedShow(){
				let data = {
					userimg:this.usermain.userimg,
					message:this.new_data,
					username:this.usermain.username // 提供给首页
					}
				this.socket.emit('show',data,this.userinfo.id)
			},

			// 获取页面高度
			getElementStyle(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.bg').boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  console.log("节点离页面顶部的距离为" + data.top);
				  this.addHeighht = data.height - 186
				}).exec();
			},
			
			// 添加好友动画效果
			addfriendAnimat(){
				console.log('ok')
				this.isadd = !this.isadd
				// 实现拉长和回收有不同的速度
				var animation = uni.createAnimation({
				      duration: 500,
				        timingFunction: 'ease',
				    })
					
				var animation2 = uni.createAnimation({
				      duration: 500,
				        timingFunction: 'ease',
				    })
				var animation3 = uni.createAnimation({
				      duration: 500,
				        timingFunction: 'ease',
				    })
				var animation4 = uni.createAnimation({
				      duration: 500,
				        timingFunction: 'ease',
				    })
				
			
				if(this.isadd){
					animation.top(186).step()
					animation2.width(120).right(64).step()
					animation2.height(120).step()
					animation3.opacity(0).step()
					animation4.backgroundColor('rgba(255, 242, 46, 0.8)').step()
				}else{
					animation.top(886).step()
					animation2.width(200).right(0).step()
					animation2.height(200).step()
					animation3.opacity(1).step()
					animation4.backgroundColor('').step()
				}
				
			
				this.animationData = animation.export()
				this.animationData2 = animation2.export()
				this.animationData3 = animation3.export()
				this.animationData4 = animation4.export()
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	
	.bg .bg_img image{
		/* 透明度设置 */
		opacity: 0.4;
		position: absolute;
		top: 0;
		left:0;
		width: 110%;
		height: 110%;
		filter: blur(16rpx);
		z-index: -2;
	}
	.bg .main{
		height: 100%;
		position: relative;
		z-index: 10;
	}
	.bg .main .userimg{
		z-index: 9;
		margin: 20rpx 0;
		margin-top: 140rpx;
		margin-left: 180rpx;
		width: 400rpx;
		position: relative;
	}
	.bg .main .userimg image{
		width: 400rpx;
		border-radius: 80rpx;
		border: white 2rpx solid;
		box-shadow: 0 36rpx 48rpx 0 #d3d3d3;
	}
	.bg .main .userimg .gender image{
		z-index: 90;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}
	/* name */
	.bg .main .username{
		width: 600rpx;
		height: 60rpx;
		margin-left: 80rpx;
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
	}
	.bg .main .sub_name{
		text-align: center;
	}
	.bg .main .userdata{
		margin-top: 30rpx;
		width: 500rpx;
		height: 160rpx;
		line-height: 40rpx;
		margin-left: 130rpx;
		font-size: 30rpx;
		text-align: center;
		color: #616161;
	    display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:4;
	}
	
	/* but */
	.bg .main .but{
		/* 安全距离 */
		padding-bottom: var(--status-bar-height);
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 104rpx;
		background-color: rgba(253, 255, 255, 0.5);
	}
	.bg .main .but .buts{
		margin-left: 10%;
		margin-top: 7rpx;
		width: 80%;
		height: 90rpx;
		background-color:#f4ea2a ;
		text-align: center;
		color: white;
		font-size: 40rpx;
		line-height: 90rpx;
		/* z-index: 90; */
		position: relative;
	}
	.butss{
		position: absolute;
		top:0;
		left: 0;
		width: 600rpx;
		height: 90rpx;
	}
	
	.bg .main .add_misg{
		position: fixed;
		/* top:1472rpx; */
		padding: 0 56rpx;
		width: calc( 100vw - 112rpx );
		/* height: 1252rpx; */
		background-color:white;
		border-radius: 40rpx 40rpx 0 0;
		/* z-index: 92; */
	}
	.bg .main .add_misg .name{
		margin-top: 30rpx;
		padding: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 40rpx;
		font-weight: 600;
	}
	.bg .main .add_misg .add_main{
		width: calc( 100% - 60rpx );
		height: 400rpx;
		background-color: #f1f1f0;
		padding: 0 30rpx;
		font-size: 32rpx;
		line-height: 64rpx;
		border-radius: 56rpx;
	}
	.bg .main .add_misg .add_but{
		padding-bottom: var(--status-bar-height);
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 104rpx;
		background-color: rgba(253, 255, 255, 0.5);
	}
	.bg .main .add_misg .add_but .send{
		float: left;
		margin-left: 5%;
		margin-top: 7rpx;
		width: 50%;
		height: 90rpx;
		background-color:#f4ea2a ;
		color: white;
		font-size: 40rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 30rpx;
		/* z-index: 99; */
	}
	.bg .main .add_misg .add_but .close{
		float: left;
		width: 30%;
		height: 90rpx;
		margin-top: 7rpx;
		font-size: 40rpx;
		line-height: 90rpx;
		background-color:#ebebeb ;
		text-align: center;
		border-radius: 30rpx;
	}
</style>
